<!DOCTYPE html>
<html>
<head>
<title>hra 15</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>



//objekt elprvok 
function elprvok(id, label, posx, posy, color, ok, x, y){
	this.id = id;
	this.label = label;
	this.posx = posx;  // pixely radovo nasobky so 100
	this.posy = posy;  // pixely radovo nasobky so 100
	this.color = color;
	this.ok = ok;
	this.x = x;
	this.y = y;
}


//nahodna hodnota z intervalu
function getRandomInt(min, max){
	return Math.floor(Math.random() * (max+1 - min)) + min;
}




//premiesanie prvkov v poli
function shake(pole1){
			
	for(var t=1; t<=100; t++){		
		var p1 = getRandomInt(1,16),
			p2 = getRandomInt(1,16),
			pom = 0;
		
		pom = pole1[p1];
		pole1[p1] = pole1[p2];
		pole1[p2] = pom;			
	}		
	return pole1;
}


//mozne zmenit poziciu ak je v blizkosti aktualnej pozicie v smere + (hore vpravo dole vlavo) bunka s label 16, vypise aj suradnice kam ak je mozne zmenit 
function mozne(element,ii,jj){
	//var zmen = new Array(); // 1 ano 0 nie | pozicia1 pozicia2
	var ob = new elprvok(0,0,0,0,"yellow",1,0,0);

	
	ob.ok = 0;

	if((ii>1)&&(element[ii-1][jj].label==16)){
		
		ob = element[ii-1][jj]; 
		
		ob.ok = 1;
		ob.y = ii-1;
		ob.x = jj;

		
		
	}
		
	if((jj>1)&&(element[ii][jj-1].label==16)){
		
		ob = element[ii][jj-1]; 
		
		ob.ok = 1;
		ob.y = ii;
		ob.x = jj-1;

		
	}	
		
	if((ii<4)&&(element[ii+1][jj].label==16)){
		
		ob = element[ii+1][jj];
		
		ob.ok = 1;
		ob.y = ii+1;
		ob.x = jj;

		
	}
		
	if((jj<4)&&(element[ii][jj+1].label==16)){
		
		ob = element[ii][jj+1];
		
		ob.ok = 1;
		ob.y = ii;
		ob.x = jj+1;

		
	}

		
	return /*zmen*/ob;
}





$(document).ready(function(){
	
	
	
	// vytvorenie matice n X n, kazdy prvok dvojrozmerneho pola obahuje objekt
	var eid = 0;
	var element = new Array(4);
	for(var i=1; i<=4; i++){
		element[i] = new Array();
		for(var j=1; j<=4; j++){
			eid++;
			element[i][j] = new elprvok(eid,eid,0,0,"green",1,j,i);
		}		
	}	
	
	

	
	
	
	
	// vytvorenie matice 4 x 4 objektov, default nastavenie id, label, posx, posy, color
	for(var i=1; i<=4; i++){
		for(var j=1; j<=4; j++){
			console.log(element[i][j].id,element[i][j].label,element[i][j].posx,element[i][j].posy,element[i][j].color,element[i][j].ok,element[i][j].x,element[i][j].y);		
		}
	}	
	
	
	
	
	
		
		
	// 1 rozmerne pole labelov, usporiadane od min po max 1 .. 16, pouzijem na lable pre maticu 4 x 4 objektov 
	var polep = new Array();		
	for(var t=1; t<=16; t++){
		polep[t] = t;		
	}
	

	//rozhadzem, shakujem povodne usporiadane pole 
	polep=shake(polep);
	
	console.log(polep);
	


	
	
	
	// do body pridame 400 px x 400 px hracie pole stvorec
	$("body").append("<div/ id='main'>");
		
	$("#main").css({"background":"red",
					"position":"absolute",
					"top":"100px",
					"left":"100px",
					"width":"400px",
					"height":"400px",
					"-webkit-box-shadow":"1px 2px 10px 0px #444444",
					"-moz-box-shadow":"1px 2px 10px 0px #444444",
					"box-shadow":"1px 2px 10px 0px #444444"
					});
	
	
	//rozhodenie shake hodnot pola do 4 x 4 matrice objektov
	var eid = 0;
	for(var i=1; i<=4; i++){
		for(var j=1; j<=4; j++){
			eid++;
			//element[i][j].id
			element[i][j].label = polep[eid];
			element[i][j].posx = (j - 1) * 100;
			element[i][j].posy = (i - 1) * 100;
			element[i][j].color = "green";
			if(element[i][j].label==16) element[i][j].color = "white";			
		}
	}
	
	
	//vypis matice
	for(var i=1; i<=4; i++){
		for(var j=1; j<=4; j++){
			console.log(element[i][j].id,element[i][j].label,element[i][j].posx,element[i][j].posy,element[i][j].color,element[i][j].ok,element[i][j].x,element[i][j].y);		
		}
	}
	
	
	
	
	

	
	for(var i=1; i<=4; i++){
		for(var j=1; j<=4; j++){			
			$("#main").append("<div/ class='prvok' id="+element[i][j].id+">"+element[i][j].label);			
			$("#"+element[i][j].id+"").css({"background":element[i][j].color,
				 							"color":"white",
											"font-size":"16px",
											"font-weight":"bold",
											"position":"absolute",
											"top":element[i][j].posy,
											"left":element[i][j].posx,
											"width":"98px",
											"height":"98px",
											"border":"1px solid blue"
											});			
		}	
	}
		
	
		
	
	
	
	
	

	
	
	$(".prvok").click(function(){		
		var idprvok = $(this).attr("id"),
			labelprvok = $(this).text(),
			posyprvok = $(this).css("top"),
			posxprvok = $(this).css("left"),
			colorprvok = $(this).css("background");
		

			
			
			
			
			if(labelprvok!=16){

				
				var ii = 0, 
					jj = 0;
				
				ii = (parseInt(posyprvok) / 100) + 1;
				jj = (parseInt(posxprvok) / 100) + 1;
				
				

				
				
				if(mozne(element,ii,jj).ok==1){	
					var prepi = 0, 
						prepj = 0;

					var elementempty_id = "#" + mozne(element,ii,jj).id;	  		
					
	
					
					prepi = (mozne(element,ii,jj).y-1)*100;
					prepj = (mozne(element,ii,jj).x-1)*100;
					

					
					$(this).css({"z-index":"101"}).animate({top:prepi, left:prepj});

					
					$(elementempty_id).css({"top":posyprvok,
											"left":posxprvok											
											});
					


					
					var iii = mozne(element,ii,jj).y,
						jjj = mozne(element,ii,jj).x;

					
					var pomob = new elprvok(0,0,0,0,"yellow",1,0,0);
					
					pomob = element[ii][jj];					
					element[ii][jj]= mozne(element,ii,jj);					
					element[iii][jjj] = pomob;

					

					
					
					console.table(mozne(element,ii,jj));
					console.table(element[ii][jj]);
					console.table(pomob);
					console.dir(pomob);
					
				}
				
				
				
				
			}
			
		
		
		
	});
	

	
	
	
	
	
	
	
});

</script>

</head>

<body>

<h1>HRA 15</h1>



</body>

</html>